<template>
	<view class="container">
		<view class="plr_16 ptb_12 bc_fff mt_8" v-for="item,index in dataList" :key="index">
			<navigator hover-class="none" :url="`/pages/goods/pages/bargain_info?id=${item.id}`" class="fx fx_nw">
				<view class="fx_sh">
					<view class="ib pr br_12 flow_h">
						<view class="plr_8 lh_18 fz_10 fc_fff pa t_0 l_0 bc_lg zi_1" :style="[status(item).style]">
							{{status(item).txt}}
						</view>
						<CusImage width="240rpx" height="240rpx" radius="24rpx"
							:src="item.coverImageUrl||item.specificationImageUrl" mode="aspectFit" />
					</view>
				</view>
				<view class="ml_12 fx_1 flow_h">
					<view class="fz_16 fb fe">
						{{item.productName||item.name||''}}
					</view>
					<view class="mt_4 fz_12 fc_999">
						最低价￥{{item.bargainirgMinPrice||0}}
					</view>
					<view class="mt_4 fz_12 fc_999">
						剩余：{{item.stock||0}}件
					</view>
					<view class="mt_6 group_btn" v-if="item.bargainirgStatus==0">
						<view class="countdown fx_1 fx aic">
							<CountDown :time="new Date(item.endTime).getTime()-new Date().getTime()" color="#8F5705"
								@finish="item.bargainirgStatus==0&&getMyBargin()" />
							<view class="ml_2 fz_12" style="color:#8F5705;">
								后结束
							</view>
						</view>
					</view>
					<view class="mt_6 group_btn" v-if="item.bargainirgStatus==2">
						<view class="countdown fx_1 fx aic">
							<view class="ml_2 fz_12" style="color:#8F5705;">
								{{endTime(item)}}活动已结束
							</view>
						</view>
					</view>
					<view class="fb mt_4 fc_r fx aib">
						当前价<text class="fz_20">¥{{bargainInfo(item).now}}</text>
					</view>
				</view>
				<u-icon name="arrow-right" size="24"></u-icon>
			</navigator>
			<!-- 支付成功 -->
			<template v-if="item.bargainirgStatus==1">
				<view class="mt_24 fb fz_16 fc">
					恭喜您邀请砍价成功，快去支付吧~
				</view>
				<view class="mt_12 fc fc_primary">
					{{$u.timeFormat(item.endTime, 'yyyy/mm/dd hh:MM')}}活动结束前支付
				</view>
			</template>
			<!-- 砍价中 -->
			<template v-else-if="item.bargainirgStatus==0">
				<!-- 砍价中 -->
				<template v-if="item.isBargainirg">
					<view class="mt_24 fb fz_16 fc">
						帮砍成功！
					</view>
					<view class="mt_24">
						<button class="custom_btn primary bc_lg lh_44 w100 mt_12 br_26 fz_14"
							style="background: linear-gradient(90deg, #FA4704 0%, #FE8D00 100%)"
							@click="$utils.navigateBack(1,'/pages/goods/pages/bargain')">
							我也要参与
						</button>
					</view>
				</template>
				<template v-else-if="bargainInfo(item).gap==0">
					<view class="mt_24 fb fz_16 fc">
						恭喜您邀请砍价成功，快去支付吧~
					</view>
					<view class="mt_12 fc fc_primary">
						{{$u.timeFormat(item.endTime, 'yyyy/mm/dd hh:MM')}}活动结束前支付
					</view>
				</template>
				<template v-else>
					<view class="mt_24 fb fz_16 fc">
						已砍<text class="fc_primary">{{item.bargainirgPrice||0}}</text>元，还剩<text
							class="fc_primary">{{bargainInfo(item).gap}}</text>元
					</view>
					<view class="plr_12 mt_12">
						<u-line-progress :percentage="bargainInfo(item).percent"
							activeColor="linear-gradient(90deg, #FA4904 0%, #FF9000 100%)" inactiveColor="#FFD7C8"
							:showText="false"></u-line-progress>
					</view>
					<view class="mt_12 fc">
						<Divider :text="`已有${item.bargainirgNumber||0}位好友砍价成功`" color="#999" />
					</view>
				</template>
			</template>
			<template v-else>
				<template v-if="item.orderTime">
					<view class="mt_24 fb fz_16 fc">
						已购买该砍价商品。
					</view>
				</template>
				<template v-else>
					<view class="mt_24 fb fz_16 fc">
						好友砍价活动已结束！
					</view>
					<view class="mt_24">
						<button class="custom_btn primary bc_lg lh_44 w100 mt_12 br_26 fz_14"
							style="background: linear-gradient(90deg, #FA4704 0%, #FE8D00 100%)"
							@click="$utils.navigateBack(1,'/pages/goods/pages/bargain')">
							我也要参与
						</button>
					</view>
				</template>
			</template>
			<view class="mt_24 fx jce">
				<button class="custom_btn lh_32 default width_110 mt_12 br_26 fz_12 mlafter_7"
					@click="handleDelete(item)" v-if="item.bargainirgStatus==2">
					删除记录
				</button>
				<button class="custom_btn default lh_32 primary width_110 mt_12 br_26 fz_12 mlafter_7"
					@click="handleCheck(item)">
					查看砍价记录
				</button>
				<button class="custom_btn bc_lg lh_32 primary width_110 mt_12 br_26 fz_12 mlafter_7"
					@click="handleBuy(item)" v-if="item.bargainirgStatus!=2">
					立即下单
				</button>
				<navigator hover-class="none" :url="`/pages/goods/pages/bargain_info?id=${item.id}`" <button
					class="custom_btn bc_lg lh_32 primary width_110 mt_12 br_26 fz_12 mlafter_7"
					@click="handleShare(item)" v-if="item.bargainirgStatus==0&&bargainInfo(item).gap">
					邀请好友帮砍价
					</button>
				</navigator>
			</view>
		</view>
		<view class="mt_76" v-if="!dataList.length&&!loading">
			<Empty title="暂无砍价记录" />
		</view>
		<RecordWindow :visible.sync="recordPopShow" :data="current" />
		<ShareWindow :data="currentData" :goodsType="3" :params="dataParams" page="/pages/goods/pages/bargain_info"
			:visible.sync="sharePopShow" @select="handleShareSelect" />
		<canvas style="width: 600rpx;height:718rpx;" canvas-id="firstCanvas"></canvas>
	</view>
</template>

<script>
	import CusImage from '@/components/Image'
	import CountDown from '@/components/CountDown'
	import Divider from '@/components/Divider.vue'
	import Empty from '@/components/Empty'
	import ShareWindow from '@/components/goods/ShareWindow'
	import RecordWindow from '../components/RecordWindow'
	import share from '@/mixins/share.js'
	import api from '@/service/config/api.js'
	export default {
		mixins: [share],
		components: {
			CusImage,
			CountDown,
			Divider,
			ShareWindow,
			RecordWindow,
			Empty
		},
		data() {
			return {
				userInfo: this.$storage.getItem('basicUnserInfo') || {},
				sharePath: '/pages/goods/pages/bargain_info', // 分享连接
				shareTitle: '您的好友邀请您砍一刀',
				dataParams: {},
				dataList: [],
				current: null, // 当前项
				loading: true,
				sharePopShow: false,
				recordPopShow: false,
				currentData: {},
			}
		},
		computed: {
			bargainInfo() {
				return data => ({
					percent: Math.floor(((data.bargainirgPrice || 0) / ((data
						.bargainirgStartPrice || 0) - (data.bargainirgMinPrice || 0))) * 100),
					gap: this.$utils.floatSub(this.$utils.floatSub((data.bargainirgStartPrice || 0), (data
						.bargainirgPrice || 0)), (data
						.bargainirgMinPrice || 0)),
					now: this.$utils.floatSub((data.bargainirgStartPrice || 0), (data
						.bargainirgPrice || 0))
				})
			},
			status() {
				return item => {
					switch (item.bargainirgStatus) {
						case 0:
							if(this.bargainInfo(item).gap==0) {
								return {
									txt: '砍价成功',
										style: {
											background: 'linear-gradient(90deg, #FA4904 0%, #FF9000 100%)',
											borderRadius: '0 0 16rpx 0'
										}
								}
							}
							return {
								txt: '砍价中',
									style: {
										background: 'linear-gradient(90deg, #FA4904 0%, #FF9000 100%)',
										borderRadius: '0 0 16rpx 0'
									}
							}
						case 1:
							return {
								txt: '砍价成功',
									style: {
										background: 'linear-gradient(90deg, #FA4904 0%, #FF9000 100%)',
										borderRadius: '0 0 16rpx 0'
									}
							}
						case 2:
							return {
								txt: '砍价结束',
									style: {
										background: '#cccccc',
										borderRadius: '0 0 16rpx 0'
									}
							}
						default:
							break
					}
				}
			},
			endTime() {
				return item => {
					return this.$moment(item.endTime).format('YYYY/MM/DD HH:mm:ss')
				}
			}
		},
		onShow() {
			this.dataParams = {
				goodsType: 3,
				...this.$store.state.userInfo.customerId ? {
					customerId: this.$store.state.userInfo.customerId
				} : {},
			}
			this.getMyBargin()
		},
		methods: {
			getMyBargin() {
				api.get('/goods/api/product/userBargainirgInfoMy', {
					...this.$store.state.userInfo.customerId ? {
						customerId: this.$store.state.userInfo.customerId
					} : {},
				}, {
					noHideLoading: true
				}).then(res => {
					this.dataList = res.data
				}).finally(() => {
					this.loading = false
				})
			},
			handleCheck(data) {
				this.current = data
				this.recordPopShow = true
			},
			handleBuy(data) {
				this.$utils.loading()
				const {
					id: bargainId,
					brandId
				} = data
				api.post('/order/api/order/preOrder', {
					preOrderType: 3,
					productDetails: [{
						buyNum: 1,
						bargainId,
						brandId: brandId,
					}]
				}).then(res => {
					if (res.data && res.data.preOrderNo) {
						uni.navigateTo({
							url: '/pages/goods/pages/confirm?order=' + res.data.preOrderNo
						})
					} else {
						this.$utils.showToast('下单失败，请重试')
					}
				})
			},
			handleShare(data) {
				console.log(1111, data)
				this.currentData = {
					...data,
					salePrice: data.bargainirgMinPrice,
					coverImageUrl: data.coverImageUrl || data.specificationImageUrl,
					goodsType: 3
				};
				this.shareImageUrl = data.coverImageUrl || data.specificationImageUrl
				this.sharePath = '/pages/goods/pages/bargain_info'
				this.$set(this.dataParams, 'id', data.id)
				this.$set(this.dataParams, 'customerId', this.$store.state.userInfo.customerId)
				this.shareTitle = '您的好友邀请您砍一刀'
				this.shareType = 'bargain'
				this.$nextTick(() => {
					this.sharePopShow = true
				})
			},
			handleShareSelect(type) {
				switch (type) {
					case 'circle':
						wx.downloadFile({
							url: 'https://res.wx.qq.com/wxdoc/dist/assets/img/demo.ef5c5bef.jpg',
							success: (res) => {
								wx.showShareImageMenu({
									path: res.tempFilePath
								})
							}
						})
						break;
					default:
						break;
				}
			},
			handleDelete(data) {
				this.$utils.loading()
				api.get('/goods/api/product/deleteBargainirg', {
					id: data.id
				}).then(() => {
					this.getMyBargin()
				})
			}
		},
	}
</script>

<style lang="scss">
	.container {}
</style>